import React from 'react';
import { View, Text } from 'react-native';
import PropTypes from 'prop-types';
import fn from '../../components/PlateformHalf';
import SystemIcon from '../../components/SystemIcon';

const SWATCH_WIDTH = fn(140);

const IconList = ({ icoNames }) => (
  <View style={{ flexWrap: 'wrap', flexDirection: 'row', justifyContent: 'flex-start' }}>{icoNames.map(icoName => (
    <View
      style={{
        paddingLeft: fn(10), paddingRight: fn(10), width: SWATCH_WIDTH, marginBottom: fn(40),
        }}
      key={icoName}
    >
      <View style={{ width: SWATCH_WIDTH, height: SWATCH_WIDTH / 2, marginBottom: fn(10) }}>
        <SystemIcon icoName={icoName} />
      </View>
      <Text>{icoName}</Text>
    </View>))}
  </View>
);
IconList.propTypes = {
  /**
   * ### IconList 属性说明
   *
   * 展示所有的小图标
   *
   * | Name | Type | Default | Details | isRequired |
   * | ------:| -----------:| -----------: | -----------: | ------:|
   * | icoNames | array | | icoName数组 | yes |
   *
   * ### IconList 代码示例(详见示例项目)
   *
   * ```html
   * <IconList icoNames={['back', 'backTheme']}/>
   * ```
   */
  icoNames: PropTypes.instanceOf(Array).isRequired,
};
export default IconList;
